<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar left-text="返回" left-arrow fixed placeholder>
      <template #left>
        <img
          src="../../assets/toutiao_logo.png"
          alt=""
          style="width: 100px; height: 30px"
        />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" class="search-icon" @click="searchFn"/>
      </template>
    </van-nav-bar>
    <!--  -->
    <van-tabs v-model="active" animated sticky offset-top="1.22666666rem" >
      <van-tab
        :title="obj.name"
        v-for="obj in userList"
        :key="obj.id"
        :name="obj.id"
      >
        <Articles :id="obj.id"></Articles>
      </van-tab>
      <!-- <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab> -->
    </van-tabs>
    <!-- 编辑频道 -->
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
     <!-- 弹出层 -->
      <van-action-sheet
      v-model="$store.state.homeArticleActionShow"
      get-container="body"
      :actions="actionArr"
      :cancel-text="cancelText"
      @select="onSelect"
      @cancel="cancelFn"
      @close="closeFnn"
    />

    <!-- 弹出层 -->
    <van-popup v-model="show" class="qq">
     <ChannelEdit @closeFn="closefn"
     :usersChannel='userList'
     @addFn="addfn"
     @removeFn="removeFn"
     v-model="active"
     ></ChannelEdit>
    </van-popup>

  </div>
</template>

<script>
import { getUesrChannelListAPI, dislikeArticleAPI, reportArticlesAPI, setuserchannelAPI, removechannelAPI } from '@/api'
import { Notify } from 'vant'
import Articles from './Articles'
import ChannelEdit from './channelEdit.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      userList: [],
      actionArr: [], // 反馈面板数据
      cancelText: '取消',
      show: false,
      ID: ''
    }
  },
  async created () {
    const res = await getUesrChannelListAPI()
    console.log(res)
    this.userList = res.data.data.channels
    this.actionArr = this.firstActions
  },
  computed: {
    ...mapState(['firstActions', 'secondActions', 'articlesArtId'])
  },
  components: {
    Articles,
    ChannelEdit
  },
  destroyed () {
    this.changeActionShowMutations(false)
    console.log(111)
  },
  methods: {
    ...mapMutations(['changeActionShowMutations', 'setarticlesArtIdMutations']),
    async  onSelect (item) {
      if (item.name === '反馈垃圾内容') {
        this.actionArr = this.secondActions
        this.cancelText = '返回'
      } else if (item.name === '不感兴趣') {
        const res = await dislikeArticleAPI(this.articlesArtId)
        this.ID = this.articlesArtId
        console.log(res)
        this.changeActionShowMutations(false) // 关闭反馈面板
      } else {
        // 发送请求
        const res = await reportArticlesAPI({
          target: this.articlesArtId,
          type: item.value
        })
        // this.actionArr = this.firstActions
        Notify({ type: 'success', message: '反馈成功' })
        // 面板隐藏
        setTimeout(() => {
          this.actionArr = this.firstActions
        }, 200)
        console.log(res)
        this.changeActionShowMutations(false)
      }
    },
    cancelFn () {
      if (this.cancelText === '返回') {
        this.changeActionShowMutations()
        this.actionArr = this.firstActions
        this.cancelText = '取消'
      }
    },
    // 弹出层显示与隐藏
    plusClickFn () {
      this.show = true
    },
    closeFnn () {
      this.actionArr = this.firstActions
    },
    // 关闭弹层
    closefn (bool) {
      this.show = bool
    },
    // 添加数据
    async  addfn (channelObj) {
      this.userList.push(channelObj)

      const newArray = []
      this.userList.forEach((obj, index) => {
        const newobj = { ...obj }
        newobj.seq = index
        delete newobj.name
        newArray.push(newobj)
      })
      const res = await setuserchannelAPI(newArray)
      console.log(res)
    },
    searchFn () {
      this.$router.push('/search')
    },
    async  removeFn (chaneleid) {
      const res = await removechannelAPI(chaneleid)
      console.log(res)
      const index = this.userList.findIndex(obj => chaneleid === obj.id)
      this.userList.splice(index, 1)
    }

  }
}
</script>

<style scoped lang='less'>
.van-icon-search:before {
  color: white;
}
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* // 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.qq {
  background-color: transparent;
  height: 100%;
  width: 100%;
  background-color: #fff;
}
</style>
